<template>
  <a-drawer
    width="600px"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    :title="title"
    @close="cancel"
  >
    <div class="eip-drawer-body beauty-scroll">
      <a-spin :spinning="spinning">
        <div class="padding">
          <a-space class="margin-bottom-sm">
            <a-button size="small" @click="titleY" type="primary"
              >{年}</a-button
            >
            <a-button size="small" @click="titleM" type="primary"
              >{月}</a-button
            >
            <a-button size="small" @click="titleD" type="primary"
              >{日}</a-button
            >
            <a-button size="small" @click="titleH" type="primary"
              >{时}</a-button
            >
            <a-button size="small" @click="titleMm" type="primary"
              >{分}</a-button
            >
            <a-button size="small" @click="titleS" type="primary"
              >{秒}</a-button
            >
            <a-button size="small" @click="titleSs" type="primary"
              >{毫秒}</a-button
            >
            <a-button size="small" @click="titleThree" type="primary"
              >{000}</a-button
            >
            <a-button size="small" @click="titleFour" type="primary"
              >{0000}</a-button
            >
          </a-space>
          <editor
            ref="editor"
            v-if="tinymce.show"
            v-model="form.snrule"
            :height="tinymce.height"
            :toolbar="tinymce.toolbar"
            :plugins="tinymce.plugins"
            :menubar="tinymce.menubar"
          ></editor>
        </div>
      </a-spin>
    </div>
    <div class="eip-drawer-toolbar">
      <a-space>
        <a-button key="back" @click="cancel" :disabled="loading"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="save" type="primary" :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
import editor from "@/components/tinymce/index.vue";
export default {
  name: "snrule",
  components: {
    editor,
  },
  data() {
    return {
      tinymce: {
        plugins: "preview  fullscreen code",
        toolbar: "undo redo |fullscreen|code",
        height: 200,
        show: false,
        menubar: "",
      },

      form: {
        snrule: "",
      },

      loading: false,
      spinning: false,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    edit: {
      type: String,
    },
    title: {
      type: String,
    },
  },
  mounted() {
    this.find();
    setTimeout(() => {
      this.tinymce.show = true;
    }, 10);
  },
  methods: {
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 当前年
     */
    titleY() {
      this.$refs.editor.insert("{年}");
    },

    /**
     * 当前月
     */
    titleM() {
      this.$refs.editor.insert("{月}");
    },

    /**
     * 当前日
     */
    titleD() {
      this.$refs.editor.insert("{日}");
    },

    /**
     * 当前时
     */
    titleH() {
      this.$refs.editor.insert("{时}");
    },

    /**
     * 当前分
     */
    titleMm() {
      this.$refs.editor.insert("{分}");
    },

    /**
     * 当前秒
     */
    titleS() {
      this.$refs.editor.insert("{秒}");
    },

    /**
     * 当前毫秒
     */
    titleSs() {
      this.$refs.editor.insert("{毫秒}");
    },

    /**
     * 三位数
     */
    titleThree() {
      this.$refs.editor.insert("{000}");
    },

    /**
     * 四位年数
     */
    titleFour() {
      this.$refs.editor.insert("{0000}");
    },

    /**
     * 保存
     */
    save() {
      let that = this;

      that.form.snrule = that.$refs.editor.getTxt();
      that.$emit("ok", that.form);
      that.cancel();
    },

    /**
     *
     */
    find() {
      this.form.snrule = this.edit;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
